<template>
	<view class="container">
		<block v-if="isload">

			<dd-tab :itemdata="['未使用', '已使用', '已过期']" :itemst="['0', '1', '2']" :st="st" :isfixed="false"
				@changetab="changetab"></dd-tab>
			<block v-if="datalist.some(item => (item.isgive == 1 || item.isgive == 2) && item.type === 40)">
				<view class="coupon-title" v-if="st == 0">
					<view class="coupon-title-item" :style="{ background: t('color1') }" @tap="selectCoupons(25)">
						选择25张
					</view>
					<view class="coupon-title-item" :style="{ background: t('color1') }" @tap="selectCoupons(50)">
						选择50张
					</view>
					<view class="coupon-title-item" :style="{ background: t('color1') }" @tap="selectCoupons(75)">
						选择75张
					</view>
					<view class="coupon-title-item" :style="{ background: t('color1') }" @tap="selectCoupons(100)">
						选择100张
					</view>
				</view>
			</block>
			<view class="coupon-list">
				<view class="card" v-for="(item, index) in datalist" :key="index" :style="{ background: t('color2') }">
					<!-- <view class="radiobox" @tap.stop="changeradio" :data-index="index" v-if="st == 0">
						<view class="radio" :style="item.checked ? 'background:' + t('color1') + ';border:0' : ''"
							v-if="!item.from_mid && (item.isgive == 1 || item.isgive == 2)">
							<image class="radio-img" src="/static/img/checkd.png" />
						</view>
					</view> -->
					<view class="card-left" @tap.stop="changeradio" :data-index="index">

						<view class="pt_left">
							<view class="pt_left-content">
								<view class="f1" v-if="item.type == 1"><text class="t0">￥</text><text class="t1">{{
									item.money }}</text></view>
								<view class="f1" v-if="item.type == 41"><text class="t0">￥</text><text class="t1">{{
										item.money }}</text></view>
								<view class="f1" v-if="item.type == 30"><text class="t0">￥</text><text class="t1">{{
									item.money }}</text></view>
								<view class="f1" v-if="item.type == 10"><text class="t1">{{ item.discount / 10
								}}</text><text class="t0">折</text></view>
								<view class="f1" v-if="item.type == 2">礼品券</view>
								<view class="f1" v-if="item.type == 3"><text class="t1">{{ item.limit_count
								}}</text><text class="t2">次</text></view>
								<view class="f1" v-if="item.type == 4">抵运费</view>
								<view class="f1" v-if="item.type == 5"><text class="t0">￥</text><text class="t1">{{
									item.money }}</text></view>
								<!-- <view class="f2"
									v-if="item.type == 1 || item.type == 4 || item.type == 5 || item.type == 30">
									<text v-if="item.minprice > 0">满{{ item.minprice }}元可用</text>
									<text v-else>无门槛</text>
								</view> -->
								<view class="f1" v-if="item.type == 40">电影通用兑换券</view>
								<view class="f1" v-if="item.type == 20">券包</view>
								<view class="" style="font-size: 12px;"
									v-if="!item.from_mid && (item.isgive == 1 || item.isgive == 2)">
									点击赠送
								</view>
							</view>
						</view>

						<view class="triangle-checkmark" v-if="st == 0" :style="{
								      'border-color': item.checked 
								        ? `transparent transparent ${t('color1')} transparent` 
								        : 'transparent transparent #dddddd transparent'
								    }">
						</view>
					</view>
					<view class="card-item">
						<view class="card-right" @tap.stop="goto" :data-url="'coupondetail?rid=' + item.id">
							<view class="card-time fw-700">
								{{ item.couponname }}
							</view>
							<view class="card-time">
								<text class="t2" v-if="item.type == 1">商品券</text>
								<text class="t2" v-if="item.type == 30">当面付抵扣券</text>
								<text class="t2" v-if="item.type == 2">礼品券</text>
								<text class="t2" v-if="item.type == 3">计次券</text>
								<text class="t2" v-if="item.type == 4">运费抵扣券</text>
								<text class="t2" v-if="item.type == 20">券包</text>
								<text class="t2" v-if="item.type == 40">电影通用兑换券</text>
								<!-- <view class="">
									<text class="t2"
										v-if="!item.from_mid && (item.isgive == 1 || item.isgive == 2)">可赠送</text>
								</view> -->

								<view class="t4" v-if="item.bid > 0">适用商家：{{ item.bname }}</view>
							</view>
							<view class="card-time">有效期至 {{ item.endtime }}</view>
						</view>
						<block v-if="item.isgive != 2 && st == 0">
							<block v-if="item.type == 1 || item.type == 10 || item.type == 41">
								<view class="card-btn" :style="{ background: t('color1') }"
									v-if="inArray(item.fwtype, [0, 1, 2])" @tap.stop="goto"
									:data-url="'/pages/shop/prolist?cpid=' + item.couponid + (item.bid ? '&bid=' + item.bid : '')+ '&cid=' + item.cid + '&proid=' + item.pid ">
									去使用
								</view>
								<view class="card-btn" :style="{ background: t('color1') }" v-if="item.fwtype == 4"
									@tap.stop="goto"
									:data-url="'/activity/yuyue/prolist?cpid=' + item.couponid + (item.bid ? '&bid=' + item.bid : '')">
									去使用
								</view>
							</block>
							<block v-else-if="item.type == 40">
								<view class="card-btn" :style="{ background: t('color1') }" @tap.stop="goto"
									:data-url="'/pagesZone/movie/index'">
									去使用
								</view>
							</block>
							<block v-else>
								<view class="card-btn" :style="{ background: t('color1') }" @tap.stop="goto"
									:data-url="'coupondetail?rid=' + item.id">
									去使用
								</view>

							</block>


						</block>
						<image class="sygq" v-if="st == 1" :src="static_url + '/static/img/ysy.png'"></image>
						<image class="sygq" v-if="st == 2" :src="static_url + '/static/img/ygq.png'"></image>
					</view>
				</view>

			</view>
			<nomore v-if="nomore"></nomore>
			<nodata v-if="nodata"></nodata>
			<!-- <view class="giveopbox" v-if="checkednum > 0" :class="menuindex > -1 ? 'tabbarbot' : 'notabbarbot3'">
				<view class="btn-give" @tap="showShareOptions" v-if="getplatform() == 'app'"
					:style="{ background: 'linear-gradient(90deg,' + t('color2') + ' 0%,rgba(' + t('color2rgb') + ',0.8) 100%)' }">
					转赠好友({{ checkednum }}张)</view>
				<view class="btn-give" @tap="showShareOptions" v-else-if="getplatform() == 'mp'"
					:style="{ background: 'linear-gradient(90deg,' + t('color2') + ' 0%,rgba(' + t('color2rgb') + ',0.8) 100%)' }">
					转赠好友({{ checkednum }}张)</view>
				<view class="btn-give" @tap="showShareOptions" v-else-if="getplatform() == 'h5'"
					:style="{ background: 'linear-gradient(90deg,' + t('color2') + ' 0%,rgba(' + t('color2rgb') + ',0.8) 100%)' }">
					转赠好友({{ checkednum }}张)</view>
				<button class="btn-give" @tap="showShareOptions" v-else
					:style="{ background: 'linear-gradient(90deg,' + t('color2') + ' 0%,rgba(' + t('color2rgb') + ',0.8) 100%)' }">转赠好友({{ checkednum }}张)</button>
			</view> -->
			<view class="giveopbox" v-if="checkednum > 0" :class="menuindex > -1 ? 'tabbarbot' : 'notabbarbot3'">
				<view class="btn-give" @tap="shareapp" v-if="getplatform() == 'app'"
					:style="{ background: t('color1') }">
					转赠好友({{ checkednum }}张)</view>
				<view class="btn-give" @tap="sharemp" v-else-if="getplatform() == 'mp'"
					:style="{ background: t('color1') }">
					转赠好友({{ checkednum }}张)</view>
				<view class="btn-give" @tap="sharemp" v-else-if="getplatform() == 'h5'"
					:style="{ background: t('color1') }">
					转赠好友({{ checkednum }}张)</view>
				<button class="btn-give" @tap="showShareOptions" v-else :style="{ background: t('color1') }">转赠好友({{
					checkednum }}张)</button>
			</view>
			<!-- 添加分享选项弹框 -->
			<uni-popup ref="sharePopup" type="bottom">
				<view class="share-popup">
					<view class="share-title">选择分享方式</view>
					<view class="share-options">
						<view class="share-option" @tap="selectShareType(1)"
							:class="{ 'share-option-active': selectedType === 1 }">
							<view class="option-text">领取所有</view>
							<view class="option-desc">好友可领取全部优惠券</view>
						</view>
						<view class="share-option" @tap="selectShareType(2)"
							:class="{ 'share-option-active': selectedType === 2 }">
							<view class="option-text">随机领取一张</view>
							<view class="option-desc">好友随机领取一张优惠券</view>
						</view>
					</view>
					<view class="share-buttons">
						<view class="share-btn share-btn-cancel" @tap="closeSharePopup">取消</view>
						<button class="share-btn share-btn-confirm" :disabled="!selectedType" open-type="share"
							@tap="handleShare" :style="{ background: t('color1') }">
							<view class="share-btn share-btn-confirm" :class="{ 'share-btn-disabled': !selectedType }">
								确定
							</view>
						</button>

					</view>
				</view>
			</uni-popup>
			<view style="display:none">{{ test }}</view>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	var app = getApp();

	export default {
		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,
				pre_url: app.globalData.pre_url,
				static_url: app.globalData.static_url,

				st: 0,
				datalist: [],
				pagenum: 1,
				nomore: false,
				nodata: false,
				givecheckbox: false,
				checkednum: 0,
				test: '',
				shareTitle: '',
				sharePic: '',
				shareDesc: '',
				shareLink: '',
				receive_type: 1,
				selectedType: 0,
			};
		},

		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.st = this.opt.st || 0;

			this.getdata();
			if (opt.coupon_id) {
				this.getcoupon();
			}
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		onReachBottom: function() {
			if (!this.nodata && !this.nomore) {
				this.pagenum = this.pagenum + 1;
				this.getdata(true);
			}
		},
		onShareAppMessage: function() {
			console.log('this.shareLink');
			console.log(this.shareLink);
			return this._sharewx({
				title: this.shareTitle,
				pic: this.sharePic,
				desc: this.shareDesc,
				link: this.shareLink
			});
		},
		onShareTimeline: function() {
			var sharewxdata = this._sharewx({
				title: this.shareTitle,
				pic: this.sharePic,
				desc: this.shareDesc,
				link: this.shareLink
			});
			var query = (sharewxdata.path).split('?')[1] + '&seetype=circle';
			console.log(sharewxdata)
			console.log(query)
			return {
				title: sharewxdata.title,
				imageUrl: sharewxdata.imageUrl,
				query: query
			}
		},
		methods: {
			// 显示分享选项弹框
			showShareOptions() {
				this.selectedType = 0; // 重置选择
				this.$refs.sharePopup.open();
			},

			// 关闭分享选项弹框
			closeSharePopup() {
				this.selectedType = 0;
				this.$refs.sharePopup.close();
			},

			// 选择分享类型
			selectShareType(type) {
				this.selectedType = type;
			},

			// 处理分享
			handleShare() {

				if (!this.selectedType) {
					app.error('请选择分享方式');
					return;
				}
				this.receive_type = this.selectedType;
				let ids = this.datalist
					.filter(item => item.checked)
					.map(item => item.id)
					.join(',');

				this.shareTitle = '送你' + this.checkednum + '张' + this.t('优惠券');
				this.shareDesc = '点击前往查看领取';
				this.sharePic = app.globalData.initdata.logo;
				// 生成时间戳
				const timestamp = new Date().getTime();

				// 生成0到1000之间的随机数
				const randomNumber = Math.floor(Math.random() * 1001);

				// 将时间戳和随机数合并成一个值
				const bath = timestamp + randomNumber;
				// 在分享链接中添加receive_type参数
				const baseScene = `rids_${ids}-pid_${app.globalData.mid}-type_${this.receive_type}-bath_${bath}`;

				this.shareLink = '/pagesExt/coupon/coupongive?scene=' + baseScene;
				uni.share({
					title: this.shareTitle,
					path: this.shareLink,
					imageUrl: this.sharePic,
				});
				this.$refs.sharePopup.close();
			},
			async selectCoupons(num) {
				// 先检查当前可用电影券数量
				let availableCoupons = this.datalist.filter(item =>
					!item.from_mid && (item.isgive == 1 || item.isgive == 2) && item.type === 40
				);

				// 如果当前数据不足且还有更多数据可以加载
				if (availableCoupons.length < num && !this.nomore) {
					this.loading = true;
					try {
						// 循环加载数据直到满足需求或没有更多数据
						while (availableCoupons.length < num && !this.nomore) {
							this.pagenum++;
							await new Promise((resolve) => {
								app.post('Coupon/mycoupon', {
									st: this.st,
									pagenum: this.pagenum,
									bid: this.opt && (this.opt.bid || this.opt.bid === '0') ? this.opt
										.bid : ''
								}, (res) => {
									if (res.data.length === 0) {
										this.nomore = true;
									} else {
										this.datalist = this.datalist.concat(res.data);
										availableCoupons = this.datalist.filter(item =>
											!item.from_mid && (item.isgive == 1 || item.isgive ==
												2) && item.type === 40
										);
									}
									resolve();
								});
							});
						}
					} finally {
						this.loading = false;
					}
				}

				// 再次检查可用电影券数量
				availableCoupons = this.datalist.filter(item =>
					!item.from_mid && (item.isgive == 1 || item.isgive == 2) && item.type === 40
				);

				if (availableCoupons.length < num) {
					app.error(`可赠送的电影券不足${num}张，当前仅有${availableCoupons.length}张可赠送电影券`);
					return;
				}

				// Check if exactly num coupons are already selected
				let currentlySelected = this.datalist.filter(item => item.checked && item.type === 40).length;
				if (currentlySelected === num) {
					// Unselect all
					this.datalist.forEach(item => {
						if (item.checked && item.type === 40) {
							item.checked = false;
						}
					});
					this.checkednum = 0;
				} else {
					// Unselect all first
					this.datalist.forEach(item => {
						if (item.type === 40) {
							item.checked = false;
						}
					});

					// Select first num available movie coupons
					let count = 0;
					this.datalist.forEach(item => {
						if (count < num && !item.from_mid && (item.isgive == 1 || item.isgive == 2) && item
							.type === 40) {
							item.checked = true;
							count++;
						}
					});
					this.checkednum = num;
				}

				// Update share info
				this.updateShareInfo();
			},

			// 更新分享信息时加入receive_type
			updateShareInfo() {
				let ids = this.datalist
					.filter(item => item.checked)
					.map(item => item.id)
					.join(',');

				this.shareTitle = '送你' + this.checkednum + '张' + this.t('优惠券');
				this.shareDesc = '点击前往查看领取';
				this.sharePic = app.globalData.initdata.logo;

				// 在分享链接中添加receive_type参数
				const baseScene = `rids_${ids}-pid_${app.globalData.mid}-type_${this.receive_type}`;

				if (app.globalData.platform == 'h5' || app.globalData.platform == 'mp' || app.globalData.platform ==
					'app') {
					this.shareLink = app.globalData.pre_url + '/h5/' + app.globalData.aid +
						'.html#/pagesExt/coupon/coupongive?scene=' + baseScene;
				} else {
					this.shareLink = '/pagesExt/coupon/coupongive?scene=' + baseScene;
				}

				this.test = Math.random();
			},
			getdata: function(loadmore) {
				if (!loadmore) {
					this.pagenum = 1;
					this.datalist = [];
				}
				var that = this;
				var pagenum = that.pagenum;
				var st = that.st;
				var bid = that.opt && (that.opt.bid || that.opt.bid === '0') ? that.opt.bid : '';

				that.loading = true;
				that.nomore = false;
				that.nodata = false;

				app.post('Coupon/mycoupon', {
					st: st,
					pagenum: pagenum,
					bid: bid
				}, function(res) {
					that.loading = false;
					uni.setNavigationBarTitle({
						title: '我的' + that.t('优惠券')
					});

					var data = res.data;

					// 初始化checked状态
					data = data.map(item => {
						return {
							...item,
							checked: item.checked || false // 确保每个item都有checked属性
						};
					});

					if (pagenum == 1) {
						that.checkednum = 0;
						that.pics = res.pics;
						that.clist = res.clist;
						that.givecheckbox = res.givecheckbox;
						that.datalist = data;

						if (data.length == 0) {
							that.nodata = true;
						}
						that.loaded();
					} else {
						if (data.length == 0) {
							that.nomore = true;
						} else {
							var datalist = that.datalist;
							var newdata = datalist.concat(data);
							that.datalist = newdata;
						}
					}
				});
			},
			toMovie(item) {
				const general = item.id
				app.globalData.general = general
				uni.navigateTo({
					url: '/pagesZone/movie/index'
				})
			},
			changetab: function(st) {
				this.st = st;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.getdata();
			},
			changeradio: function(e) {
				var that = this;
				console.log(12);
				var index = e.currentTarget.dataset.index;
				var datalist = that.datalist;
				var checked = datalist[index].checked;
				if (checked) {
					datalist[index].checked = false;
					that.checkednum--;
				} else {
					datalist[index].checked = true;
					that.checkednum++;
				}
				that.datalist = datalist;
				that.test = Math.random();
				console.log(that.checkednum);
				var ids = [];
				for (var i in datalist) {
					if (datalist[i].checked) {
						ids.push(datalist[i].id);
					}
				}
				ids = ids.join(',');
				that.shareTitle = '送你' + that.checkednum + '张' + that.t('优惠券');
				that.shareDesc = '点击前往查看领取';
				that.sharePic = app.globalData.initdata.logo;
				if (app.globalData.platform == 'h5' || app.globalData.platform == 'mp' || app.globalData.platform ==
					'app') {
					that.shareLink = app.globalData.pre_url + '/h5/' + app.globalData.aid +
						'.html#/pagesExt/coupon/coupongive?scene=rids_' + ids + '-pid_' + app.globalData.mid;
				} else {
					that.shareLink = '/pagesExt/coupon/coupongive?scene=rids_' + ids + '-pid_' + app.globalData.mid;
				}
				console.log(that.shareLink);
				that.loaded({
					title: that.shareTitle,
					pic: that.sharePic,
					desc: that.shareDesc,
					link: that.shareLink
				});
			},
			sharemp: function() {
				app.error('点击右上角发送给好友或分享到朋友圈');
				this.sharetypevisible = false
			},
			shareapp: function() {
				var that = this;
				that.sharetypevisible = false;
				uni.showActionSheet({
					itemList: ['发送给微信好友', '分享到微信朋友圈'],
					success: function(res) {
						if (res.tapIndex >= 0) {
							var scene = 'WXSceneSession';
							if (res.tapIndex == 1) {
								scene = 'WXSenceTimeline';
							}
							var sharedata = {};
							sharedata.provider = 'weixin';
							sharedata.type = 0;
							sharedata.scene = scene;
							sharedata.title = that.shareTitle;
							sharedata.summary = that.shareDesc;
							sharedata.href = that.shareLink;
							sharedata.imageUrl = that.sharePic;

							uni.share(sharedata);
						}
					}
				});
			},
			getcoupon() {
				var that = this;
				app.post('Coupon/getcoupon', {
					id: that.opt.coupon_id,
				}, function(res) {
					if (res.status == 1) {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false, // 不显示取消按钮
							confirmText: '知道了', // 自定义按钮文字
						});
						setTimeout(() => {
							that.getdata();
						}, 1000);
					} else {

						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false, // 不显示取消按钮
							confirmText: '知道了', // 自定义按钮文字
						});
					}
				});
			}
		}
	};
</script>
<style>
	.coupon-list {
		width: 100%;
		padding: 20rpx;
		background-color: #fff;
	}

	.coupon {
		width: 100%;
		display: flex;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		align-items: center;
		position: relative;
		background: #fff;
	}

	.coupon .pt_left {
		background: #fff;
		min-height: 200rpx;
		color: #FFF;
		width: 30%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.coupon .pt_left-content {
		width: 100%;
		height: 100%;
		margin: 30rpx 0;
		border-right: 1px solid #EEEEEE;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.coupon .pt_left .f1 {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		color: #fff
	}

	.coupon .pt_left .t0 {
		padding-right: 0;
	}

	.coupon .pt_left .t1 {
		font-size: 60rpx;
	}

	.coupon .pt_left .t2 {
		padding-left: 10rpx;
	}

	.coupon .pt_left .f2 {
		font-size: 20rpx;
		color: #fff;
		text-align: center;
	}

	.coupon .pt_right {
		background: #fff;
		width: 70%;
		display: flex;
		min-height: 200rpx;
		text-align: left;
		padding: 20rpx 20rpx;
		position: relative
	}

	.coupon .pt_right .f1 {
		flex-grow: 1;
		flex-shrink: 1;
	}

	.coupon .pt_right .f1 .t1 {
		font-size: 28rpx;
		color: #2B2B2B;
		font-weight: bold;
		height: 60rpx;
		line-height: 60rpx;
		overflow: hidden
	}

	.coupon .pt_right .f1 .t2 {
		height: 36rpx;
		line-height: 36rpx;
		font-size: 20rpx;
		font-weight: bold;
		padding: 0 16rpx;
		border-radius: 4rpx;
		margin-right: 16rpx;
	}

	.coupon .pt_right .f1 .t2:last-child {
		margin-right: 0;
	}

	.coupon .pt_right .f1 .t3 {
		font-size: 20rpx;
		color: #999999;
		height: 46rpx;
		line-height: 46rpx;
	}

	.coupon .pt_right .f1 .t4 {
		font-size: 20rpx;
		color: #999999;
		height: 46rpx;
		line-height: 46rpx;
	}

	.coupon .pt_right .btn {
		position: absolute;
		right: 30rpx;
		top: 50%;
		margin-top: -28rpx;
		border-radius: 28rpx;
		width: 160rpx;
		height: 56rpx;
		line-height: 56rpx;
		color: #fff
	}

	.coupon .pt_right .sygq {
		position: absolute;
		right: 30rpx;
		top: 50%;
		margin-top: -50rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.card .sygq {
		position: absolute;
		right: 30rpx;
		top: 50%;
		margin-top: -50rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.coupon .pt_left.bg3 {
		background: #ffffff;
		color: #b9b9b9 !important
	}

	.coupon .pt_right.bg3 .t1 {
		color: #b9b9b9 !important
	}

	.coupon .pt_right.bg3 .t3 {
		color: #b9b9b9 !important
	}

	.coupon .pt_right.bg3 .t4 {
		color: #999999 !important
	}

	.coupon .radiobox {
		position: absolute;
		left: 0;
		padding: 20rpx
	}

	.card .radiobox {
		position: absolute;
		left: 0;
		padding: 20rpx
	}

	.coupon .radio {
		flex-shrink: 0;
		width: 32rpx;
		height: 32rpx;
		background: #FFFFFF;
		border: 2rpx solid #BFBFBF;
		border-radius: 50%;
	}

	.card .radio {
		flex-shrink: 0;
		width: 32rpx;
		height: 32rpx;
		background: #FFFFFF;
		border: 2rpx solid #BFBFBF;
		border-radius: 50%;
	}

	.coupon .radio .radio-img {
		width: 100%;
		height: 100%
	}

	.card .radio .radio-img {
		width: 100%;
		height: 100%
	}

	.giveopbox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.btn-give {
		width: 90%;
		margin: 30rpx 5%;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 48rpx;
	}

	.coupon-title {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 20rpx;
		background: #fff;
		border-top: 1px solid #eee;
	}

	.coupon-title-item {
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		padding: 10rpx 20rpx;

		border-radius: 8rpx;
		font-size: 24rpx;
		color: #fff;
	}

	/* 分享弹框样式 */
	/* 更新分享弹框样式 */
	.share-popup {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 30rpx;
	}

	.share-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #eee;
	}

	.share-options {
		padding: 20rpx 0;
	}

	.share-option {
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #f5f5f5;
		position: relative;
	}

	.share-option-active {
		background-color: #f1f1f1;
	}

	.share-option-active::after {
		content: '';
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 32rpx;
		height: 32rpx;
		background: var(--color-primary);
		border-radius: 50%;
	}

	.option-text {
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}

	.option-desc {
		font-size: 24rpx;
		color: #999;
	}

	.share-buttons {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.share-btn {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		border-radius: 44rpx;
	}

	.share-btn-cancel {
		background-color: #f5f5f5;
		color: #666;
	}

	.share-btn-confirm {

		color: #fff;
	}

	.share-btn-disabled {
		opacity: 0.5;
		pointer-events: none;
	}

	.share-option:active {
		background-color: #f5f5f5;
	}

	.share-btn:active {
		opacity: 0.8;
	}

	.uni-popup__wrapper-box {
		background-color: #fff;
	}

	.card {
		display: flex;
		align-items: center;
		width: 100%;
		background: #efe8fb;

		border-radius: 8px;
		-webkit-mask-image: radial-gradient(circle at 88px 4px, transparent 4px, red 4.5px), radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
		/* -webkit-mask-size: 100%, 2px 4px; */
		-webkit-mask-repeat: repeat, repeat-y;
		-webkit-mask-position: 0 -8rpx, 168rpx;

		position: relative;
		margin-bottom: 20rpx;
	}

	.card-left {
		width: 88px;
		text-align: center;
		font-size: 18px;
		color: #fff;

	}

	.triangle-checkmark {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 60rpx 60rpx;

		/* border-color: transparent transparent #4CAF50 transparent; */

		transform: rotate(90deg);
	}

	.triangle-checkmark::after {
		content: "";
		position: absolute;
		bottom: -54rpx;
		left: -24rpx;
		width: 24rpx;
		height: 24rpx;
		color: white;
		font-size: 12px;
		background-image: url('https://pic.hedashepin.com/upload/3/20250526/bf7a2034309f39f662d1def3d7ca2258.png');
		background-size: contain;
		background-repeat: no-repeat;
		/* transform: translate(-50%, 50%); */
		transform: rotate(260deg);
	}

	.card-left-top {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-bottom-right-radius: 30rpx;
	}

	.card-right {
		padding: 16px 12px;
		display: flex;

		flex-direction: column;
	}

	.card-info {
		margin: 0;
		font-size: 14px;
		line-height: 20px;
		color: #fff;
	}

	.card-time {
		font-size: 12px;
		line-height: 16px;
		font-weight: normal;
		color: #fff;
		margin-top: 4px;
	}

	.card-right-text {
		display: flex;
		align-items: center;
		color: #fff;
	}

	.card-right-img {
		width: 30rpx;
		height: 30rpx;
	}

	.card-left-money {
		font-size: 24rpx
	}

	.card-btn-box {}

	.card-btn {
		color: #fff;
		border-radius: 30rpx;
		padding: 10rpx 30rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.card-btn-text {
		font-size: 24rpx;
		color: #fff;
	}

	.card-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		padding: 0 20rpx 0 0;
	}

	.card-item::before {
		content: '';
		position: absolute;

		top: 0;
		bottom: 0;
		width: 2px;
		border-left: 1px dashed #fff;

	}

	.fw-700 {
		font-weight: 700;
		font-size: 26rpx;
	}

	.f1 {
		font-size: 30rpx;
	}
</style>